<template>
  <div class="monthlyDetails1">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:5;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoNav()"><a><em class="before"></em><span>预算管理</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:4;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoCost()"><a><em class="before"></em><span>收入</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:3;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/profitDetails')"><a><em class="before"></em><span>{{project}}</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:2;background-color: #ffc107;"><a><em class="before"></em><span style="color: #4e555b;">每月详情</span><i style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row mt-4 ">
        <div class="col-12">
          <el-table
            :data="detailMonthList"
            stripe
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="content"
              label="项目"
              width="180">
            </el-table-column>
            <el-table-column
              prop="month1"
              :label="index + '月'"
              v-for="index of 12"
              :key="index">
              <template slot-scope="scope">
                {{scope.row['month' +index + 'Amount'] === '' ? 0 : scope.row['month' +index + 'Amount']}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "monthlyDetails",
    data(){
      return{
        typeId: '',
        detailMonthList: [],
        loading: {},
        project: ''
      }
    },
    created(){
      this.project = window.sessionStorage.getItem('project')
      this.typeId = window.sessionStorage.getItem('typeId')
      this.getMonthDetail()
    },
    methods:{
      gotoPersonal(item){
        window.sessionStorage.setItem('personOfMonth', item.month)
        this.$router.push("/personalRanking")
      },
      getMonthDetail(){
        // this.loading = this.$loading({
        //   lock: true,//lock的修改符--默认是false
        //   text: 'Loading',//显示在加载图标下方的加载文案
        //   spinner: 'el-icon-loading',//自定义加载图标类名
        //   background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
        //   target: document.querySelector('#table')//loadin覆盖的dom元素节点
        // });
        this.$http.get(
          '/api/getActualMonth',
          {
            params: {
              id: this.typeId
            }
          }).then(res => {
          this.detailMonthList.push(res.data)
          // this.loading.close()
        })
      },
      //跳转到首页
      gotoHome: function(){
        this.$router.push("/index")
      },
      //跳转到书吧
      gotoNav: function(){
        this.$router.push("/nav2")
      },
      //跳转到费用
      gotoCost: function(){
        this.$router.push("/profit")
      },
    },

  }
</script>

<style>

  .monthlyDetails1{
    height: 220%;
    background: white;
  }
  .monthlyDetails1  table{
    margin-bottom: 0;
  }
  .monthlyDetails1 table tr td,
  .monthlyDetails1 table tr th{
    /*text-align: center !important;*/
  }
  #monthCanvas{
    border: 1px solid #cbd3da;
    border-radius: 20px;
    padding: 20px 40px;
  }


</style>
